<template>
  <div class="home">
    <img alt="Vue logo" @click="changePage" class="mg" src="../assets/logo.png">
    {{ page }}
    <SonView ref="SonView" :page="page" msg="Welcome to Your Vue.js App" @sendToParent="sendToParent" />
    <BrotherView></BrotherView>
    <input ref="myInput" type="text" class="search" placeholder="搜索" v-show="showFlag" /> <button class="search-btn"
      @click="showInput">搜索</button>
    <SlotView>
      <!-- 具名插槽 -->
      <template #headerTop="{ likeSports }">
        <h1 v-for=" item in likeSports">{{ item.name }}</h1>

      </template>
      <!-- 匿名插槽 -->
      <!-- <h1>我是Home页面一个插槽内容</h1>
      <h1>我是Home页面一个插槽内容</h1> -->
    </SlotView>
  </div>
</template>

<script>
// @ is an alias to /src
import SonView from './SonView.vue';
import BrotherView from './BrotherView.vue';
import SlotView from './SlotView.vue'
import { getSwiper } from "@/api/home"
export default {
  name: 'HomeView',
  components: {
    SonView,
    BrotherView,
    SlotView
  },
  provide () {
    return {
      page: 1,
      msg: { name: "suming" },
      showInput: this.showInput
    }
  },
  data () {
    return {
      page: 10,
      timer: null,
      showFlag: false
    }
  },
  methods: {
    sendToParent (msg) {
      console.log("process.env.VUE_APP_BASE_API", process.env.VUE_APP_BASE_API)
      console.log("msg我是传递过来的数据", msg)
    },
    changePage () {
      this.page = this.page + 1;
      this.timer = setInterval(() => {
        this.page = this.page + 1;
        console.log("this.page", this.page)
      }, 1000);
    },
    async showInput () {
      // getSwiper({ limit: 5 }).then((result) => {
      //   let swiperBg = result?.data?.value['1719625113652001']?.swiperConfig?.list




      // }).catch((error) => {
      //   console.log(1112, error)
      // });

      try {
        const result = await getSwiper({ limit: 5 });
        let swiperBg = result?.data?.value['1719625113652001']?.swiperConfig?.list
      } catch (error) {
        console.log("errorrr", error)
      }
      // console.log(result.data.data.value)
      // this.$refs.SonView.sendToParent()
      // console.log(this.$children[0].sendToParent())

      this.showFlag = !this.showFlag;  //让input显示
      // vue的数据更新是异步的 数据变了之后.执行去重操作,形成新的虚拟dom树  和旧的虚拟dom树做对比  展示到真实dom上面去
      // this.$refs.myInput.focus();  //undefined
      // 可以通过this.$router.push 跳转  传参的话.使用query或者params传参
      // name 可以用params 也可以用query传参  但是patch只能用query传参
      // 两个的区别  query传参的可以将参数携带在地址栏,刷新不消失  params传参的刷新消失
      //  router(路由实例)  route(路由源信息对象)的区别
      // push  和replace 区别  push是往栈中添加元素  replace是替换栈顶元素 

      // this.$router.push({ path: '/about', params: { name: '张三', age: 18 } }) //不成功
      // this.$router.push({ path: '/about', query: { name: '张三', age: 18 } })
      // this.$router.push({ name: 'about', params: { name: '张三', age: 18 } })
      // this.$router.push({ name: 'about', query: { name: '张三', age: 18 } });

      // this.$nextTick(() => {
      //   console.log("this.showFlag", this.$refs.myInput)
      //   this.$refs.myInput.focus();
      // })

    },
    resizeChange () {
      console.log("resizeChange");
    }
  },
  created () {
    // 请求数据   
    // dom二级事件监听程序  第二个参数的函数必须定义在外面才能够清除
    window.addEventListener('resize', this.resizeChange);
    console.log("父组件 created2");

    // setTimeout(() => {
    //   console.log("createdthis.$refs.myInput2222222", this.$refs.myInput);
    // }, 0);
    // Promise.resolve().then(() => {
    //   console.log(" createdthis.$refs.myInput111111", this.$refs.myInput);
    // })
    console.log(" createdthis.$refs.myInput", this.$refs.myInput);

    this.$nextTick(() => {
      // 作用:延迟执行业务逻辑  获取数据更新之后的dom  原理 primise.resolve   setTimeout
      console.log(" createdthis.$refs.myInput", this.$refs.myInput);
    })

    // if ()else if () { } elseif(){ }else{

    // }

    //
  },
  beforeCreate () {
    console.log("父组件 beforeCreate1")
  },
  beforeMount () {
    // console.log("父组件 beforeMount3", document.querySelector(".mg"))
  },
  mounted () {
    console.log(" this.$refs.myInput", this.$refs.myInput);
    // 挂载完成  能够获取到dom 
    // 初始化一些插件  Echarts swiper   操作一些dom元素
    // Echarts.init(null,)
    // console.log("父组件 mounted8", document.querySelector(".mg"))
  },
  beforeUpdate () {
    console.log("父组件 beforeUpdate")
  },
  updated () {
    console.log("父组件 updated")
  },
  beforeDestroy () {
    console.log("父组件 beforeDestroy")
  },
  destroyed () {
    window.removeEventListener("resize", this.resizeChange);

    clearInterval(this.timer)
    console.log("父组件 destroyed")
  },
  activated () {
    console.log("父组件激活 activated")
  },
  deactivated () {
    console.log("父组件失去激活状态 deactivated")
  },
}

</script>
<style>
.home {
  width: calc(100% - 200px);
}

/* 事件循环机制 */
</style>
